function onLoadHandler() {
    var sections = $$(".section");
    sections.each(function(section) {
        section.addEvent("click", headerClickHandler.bind(section));
    });

    var rules = $$(".rule-set");
    rules.each(function(rule) {
        rule.addEvent("click", headerClickHandler.bind(rule));
    });

    var collapseExpandButtons = $$(".collapse-expand-button");
    collapseExpandButtons.each(function(collapseExpandButton) {
        if (collapseExpandButton.value == "Collapse all") {
            collapseExpandButton.addEvent("click", collapseAll.bind(collapseExpandButton));
        } else {
            collapseExpandButton.addEvent("click", expandAll.bind(collapseExpandButton));
        }
    });

    var propertiesTables = $$(".properties");
    propertiesTables.each(function(table) {
        var lines = table.getElements("tr");
        lines.each(function(line) {
            var cells = line.getElements("td");
            if (cells[2].get("text").contains("rgb")) {
                var color = cells[2].get("text");
                 cells[0].style.backgroundColor = getColor(color);
                if (cells[0].style.backgroundColor) {
                    cells[0].className = "color_icon";
                }
            }
        });
    });
}

function getColor(color){
    var re  = /rgb\(\d+\s*\,\s*\d+\s*\,\s*\d+\)/;
    return re.exec(color);
}


function headerClickHandler() {
    var element = this;

    if (elementIsCollapsed(element)) {
        expandElement(element);
    } else {
        collapseElement(element);
    }
}

function collapseElement(element) {
    var parent = element.parentNode;
    if (element.hasClass("section")) {
        collapseSection(parent);
    } else if (element.hasClass("rule-set")) {
        collapseRule(parent);
    }
}

function collapseRule(element) {
    element.removeClass("rule-expanded");
    element.addClass("rule-collapsed");
}

function collapseSection(element) {
    element.removeClass("section-expanded");
    element.addClass("section-collapsed");
}

function expandElement(element) {
    var parent = element.parentNode;
    if (element.hasClass("section")) {
        expandSection(parent);
    } else if (element.hasClass("rule-set")) {
        expandRule(parent);
    }
}

function expandRule(element) {
    element.addClass("rule-expanded");
    element.removeClass("rule-collapsed");
}

function expandSection(element) {
    element.addClass("section-expanded");
    element.removeClass("section-collapsed");
}

function elementIsCollapsed(element) {
    var parent = element.parentNode;
    if (element.hasClass("section")) {
        return parent.hasClass("section-collapsed");
    } else if (element.hasClass("rule-set")) {
        return parent.hasClass("rule-collapsed");
    }
}

function collapseAll(event) {
    event.stopPropagation();
    var parent = this.parentNode.parentNode;
    if (parent.hasClass("section-container")) {
        var children = parent.getElements(".rule");
        children.each(function(rule) {
            collapseRule(rule);
        })
    } else {
        if (parent.hasClass("content")) {
            var children = parent.getElements(".section-container");
            children.each(function(section) {
                collapseSection(section);
            })
        }
    }
}

function expandAll(event) {
    event.stopPropagation();
    var parent = this.parentNode.parentNode;
    if (parent.hasClass("section-container")) {
        var children = parent.getElements(".rule");
        children.each(function(rule) {
            expandRule(rule);
        })
    } else {
        if (parent.hasClass("content")) {
            var children = parent.getElements(".section-container");
            children.each(function(section) {
                expandSection(section);
            })
        }
    }
}